<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="The JointJS Jigsaw Puzzle demo serves as a template to help bring your idea to life in no time.">
        <title>Jigsaw Puzzle | JointJS</title>
        <style>
            body {
                background: black;
                color: #ddd;
            }
            #paper {
                border: 1px solid #ddd;
                background: radial-gradient(ellipse at center, #45484d 0%,#000000 100%);
                margin: auto;
            }
         #controls {
             margin: auto;
             text-align: center;
         }
        </style>
    </head>
    <body>
        <div id="paper"></div>
        <div id="controls">
            <label for="image-picker">Image:</label>
            <select id="image-picker">
                <option value="./images/cow.jpg" selected>cow</option>
                <option value="./images/mountain.jpg">mountain</option>
                <option value="./images/tree.jpg">tree</option>
            </select>
            <label for="size-picker">Size:</label>
            <select id="size-picker">
                <option value="[2,2,200]">small</option>
                <option value="[4,5,100]" selected>normal</option>
                <option value="[20,20,50]">large</option>
            </select>
        </div>
        <!-- Dependencies: -->
        <script src="../../build/joint.js"></script>
        <script src="./src/puzzle.js"></script>
    </body>
</html>
